<template>
    <view class="bg-content">
        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="background-color: white; text-align: center; width: 500px; overflow: auto;">
                <div class="tr">
                    <div class="td text-center bold" style="width: 100px;">
                        <div style="width: 100px;">商品图片</div>
                    </div>
                    <div class="td text-center bold" style="width: 100px;">编号</div>
                    <div class="td text-center bold" style="width: 100px;">名称</div>
                    <div class="td text-center bold" style="width: 100px;">显示顺序</div>
                    <div class="td text-center bold" style="width: 100px;">操作</div>
                </div>
                <div class="tr" v-for="(data, index) in tbGoodsColorList" :key="index">
                    <div class="td" style="width: 110px;">
                        <myImg :obj="data" :sysFile="{fkId: data.id}" :key="data.id"
                               :customStyle="'pointer-events: none; height: 100px;  width:100px; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                               :defaultUrl="'/pages/sub/sub2-store-platform/static/default-image/goods.jpg'"
                               :imageView="'imageView2/1/w/200/h/200'"
                        ></myImg>
                    </div>
                    <div class="td" style="width: 100px;">{{data.code}}</div>
                    <div class="td" style="width: 100px;">{{data.name}}</div>
                    <div class="td" style="width: 100px;">{{data.displayOrder}}</div>
                    <div class="td" style="width: 100px;">
                        <div style="margin-top: 10px; text-decoration: underline;"
                             @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-goods-manage/store-platform-goods/store-platform-goods-color/store-platform-goods-color-edit/index', null, data)">
                            编辑
                        </div>
                        <div style="margin-top: 10px; text-decoration: underline;" @click="deleteTbGoodsColorById(data, index)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 50px;" v-if="!tbGoodsColorList.length">
            <u-empty text="数据为空" mode="data"></u-empty>
        </div>

        <div style="padding-bottom: 5px;"></div>

        <u-button
                @click="navigateTo(`/pages/sub/sub2-store-platform/store-platform/store-platform-goods-manage/store-platform-goods/store-platform-goods-color/store-platform-goods-color-add/index?goodsId=${goodsId}`, null, findTbGoodsColorList)">
            添加商品颜色
        </u-button>
    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import myImg from '@/components/my-img'
    import {TbGoodsColorService} from "@/dev/services/tb-goods-color.service";
    import {TbGoodsSpecificationColorService} from "@/dev/services/tb-goods-specification-color.service";

    export default {
        props: ["goodsId"],
        data() {
            return {
                tbGoodsColorList: []
            }
        },
        components: {
            myImg
        },
        onReady() {
            const _self = this;
        },
        methods: {
            findTbGoodsColorList() {
                const _self = this;
                new TbGoodsColorService().findTbGoodsColorList({
                    goodsId: _self.goodsId
                }).then(result => {
                    _self.tbGoodsColorList = [];
                    _self.$nextTick(() => {
                        _self.tbGoodsColorList = result;
                    });
                });
            },
            /**
             * 删除商品规格
             * @param item
             */
            deleteTbGoodsColorById(item, index) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            // 先查询该商品颜色是否已经关联了商品规格。
                            new TbGoodsSpecificationColorService().findTbGoodsSpecificationColorCount({
                                goodsId: _self.goodsId,
                                goodsColorId: item.id
                            }).then(result => {
                                if (result) {
                                    CommonUtil.alert('删除失败！请先解除与商品规格的关联关系。');
                                } else {
                                    new TbGoodsColorService().batchDeleteTbGoodsColorByIds(item.id).then(result => {
                                        _self.tbGoodsColorList.splice(index, 1);
                                    });
                                }
                            });
                        }
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
</style>
